<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg|aaa('张三')}}</h1>
        <hr>
        <div>{{date|format('yyyy-MM-dd')}}</div>

        <div>{{date|format('abc')}}</div>
    </div>
<hr>
    <div id="app2">
        <h2>{{msg2}}</h2>

        <div>{{date2|format('yyyy-MM-dd')}}</div>

        <h1>{{msg2|aaa('战神三')}}</h1>

        <h1>{{msg2|bbb('vue2')}}</h1>
    </div>
    <script>
    // 定义全局过滤器  每一个实例对象都可以使用
        Vue.filter("format",function(val,arg){
            if(arg=='yyyy-MM-dd'){
                let ret ="";
                let year=val.getFullYear()
                let month=val.getMonth()+1
                let days=val.getDate()
                ret=`${year}年-${month}月-${days}日`
                return ret 
            }
            return val
        })


        var vm1 = new Vue({
            el:'#app',
            data:{
                msg:'vue',
                data:new Date()
            },
            methods:{

            },
            filters:{
                'aaa':function(val,bb) {
                    return val+bb
                }
            }
        });

        var vm2=new Vue({
            el:'#app2',
            data:{
                msg2:'我是vue2 ',
                date2:new Date()
            },
            filters:{
                'bbb':function(val,data){
                    return val+data+'我自己的过滤器'
                }
            }
        })
    </script>
</body>
</html>